

<template>
    <tm-app class="groupManage" bgImg="f5">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom:none;"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title">群管理</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>

        <view
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="slim_box" v-if="role==='Admin'||role==='Owner'">
                <view class="row noactive d-flex a-center j-between" @tap="goJoinOption">
                    <text class="text">入群方式</text>
                    <view class="d-flex a-center">
                        <text style="color:#999;font-size:26rpx;margin-right:10rpx;">{{joinOptionText}}</text>
                        <i class="icon icon-more-2"></i>
                    </view>


                </view>

                <view class="row d-flex a-center j-between"  @tap="goGroupBlackList">
                    <text class="text">黑名单</text>
                    <view class="d-flex a-center">
						<text style="color:#999;font-size:26rpx;margin-right:10rpx;">禁止入群</text>
						<i class="icon icon-more-2"></i>
                    </view>
                </view>
				<view class="row d-flex a-center j-between">
				    <text class="text">全体禁言</text>
				    <view class="d-flex a-center">
				        <tm-switch
				            linear="left"
				            linearDeep="accent"
				            :defaultValue="isAllBanned"
				            v-model="isAllBanned"
				            @change="changeIsAllBanned"
				            color="rgba(15, 95, 70, 0.30)"
				            :barColor="
				                isAllBanned
				                    ? 'rgba(35, 226, 166, 1)'
				                    : 'rgba(195, 204, 202, 1)'
				            "
				            barIcon=""
				            size="normal"
				        ></tm-switch>
				    </view>
				</view>
				<view class="row d-flex a-center j-between" @tap="goBannedList">
                    <text class="text">禁言列表</text>
                    <i class="icon icon-more-2"></i>
                </view>
                <view class="row d-flex a-center j-between" @tap="goJoinList">
                    <text class="text">入群申请列表</text>
                    <i class="icon icon-more-2"></i>
                </view>

            </view>


            <view class="slim_box" style="margin-top:20rpx;" v-if="role==='Owner'">
                <view class="row d-flex a-center j-between" @tap="goSetMember">
                    <text class="text">群主转让</text>
                    <i class="icon icon-more-2"></i>
                </view>
            </view>

            <view class="slim_box" style="margin-top:20rpx;" v-if="role==='Owner'">
                <view class="title d-flex a-center">
                    <view class="text">管理员设置</view>
                </view>
                <view class="sheet" style="color:#999;">
                    <view>1.管理员可修改群名称</view>
                    <view>2.管理员可发表群公告</view>
                    <view>3.设置进群方式，并可确认进群申请</view>
                    <view>4.移除群成员</view>
                    <view>5.最多可设置3名管理员</view>
                </view>

                <view class="admins d-flex wrap">
                    <view class="admin d-flex d-c a-center j-center" v-for="admin in adminMembers">
                        <cacheimg class="img" :saveKey="admin.userID" :src="admin.avatar||'/static/head.jpg'"></cacheimg>
                        <view class="text ell">{{admin.nameCard||admin.nick }}</view>
                    </view>

                    <view class="admin" @tap="goSub" v-if="role==='Owner'&&adminMembers.length">
                        <view class="btn d-flex a-center j-center">
                            <i class="tmicon tmicon-minus"></i>
                        </view>
                    </view>
                    <view class="admin" @tap="goAdd" v-if="role==='Owner'&&adminMembers.length<3">
                        <view class="btn d-flex a-center j-center">
                            <i class="tmicon tmicon-plus"></i>
                        </view>
                    </view>
                </view>

                <!-- <view class="d-flex a-center j-center"><tm-button :disabled="!notification" class="btn_main" :width="680" :shadow="0" :linear-color="['#64F1C5','#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="updateData" label="确认修改"></tm-button></view> -->

            </view>

        </view>
    </tm-app>
</template>

<script setup lang="ts">
import { ref, reactive,computed, nextTick } from "vue";
import { onReady, onShow, onLoad,onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { imStore } from "@/store/imStore";
import { getGroupMember,sendBannedMessage } from "@/api/api";
import { updateGroupProfile,getGroupProfile } from "@/hooks/imHooks";

import { config, config as configStore } from "@/store/config";
import cacheimg from '@/components/cacheimg.vue'

const IM_STORE = imStore();
const isAllBanned = ref(false)//全体禁言

const goBack = () => {
    uni.navigateBack();
};

const goBannedList = () => {
	uni.navigateTo({
	    url:`/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupBannedList?groupId=${groupId.value }`,
	});
}
const goJoinList = () => {
    uni.navigateTo({
        url:`/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupJoinList?groupId=${groupId.value }`,
    });
};

const goJoinOption = () => {
    uni.navigateTo({
        url:`/pages/TUIKit/TUIPages/TUIGroup/groupPages/joinOption?groupId=${groupId.value }`,
    });
};

const goGroupBlackList = () => {
    uni.navigateTo({
        url:`/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupBlackList?groupId=${groupId.value }`,
    });
};

const goSetMember = () => {
    if(role.value!=='Owner'){
        uni.showToast({
            icon: "none",
            title: "您不是群主",
            duration: 1500,
        });
        return
    }
    uni.navigateTo({
        url:`/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupSetMemberRole?groupId=${groupId.value }`,
    });
};


const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();

const needAgree = ref(false);
const closeJoin = ref(false);

const handleChange = async (b:boolean) =>{
    if(IM_STORE.groupDetail.payAmount){
        uni.showToast({
            icon: "none",
            title: "付费群不可设置",
            duration: 1500,
        });

        nextTick(()=>{
            needAgree.value = false;
        });


        return;
    }

    

    needAgree.value = b;
    let joinOption = '';

    if(b){
        joinOption = uni.$TIM.TYPES.JOIN_OPTIONS_NEED_PERMISSION;
        closeJoin.value = false;
    }else{

        if(closeJoin.value){
            joinOption = uni.$TIM.TYPES.JOIN_OPTIONS_DISABLE_APPLY;
        }else{
            joinOption = uni.$TIM.TYPES.JOIN_OPTIONS_FREE_ACCESS;
        }

    }
    await updateGroupProfile({groupID:IM_STORE.groupProfile.groupID,joinOption})
}
const handleChangeCloseJoin = async (b:boolean) =>{

    closeJoin.value = b;
    let joinOption = '';
    if(b){
        joinOption = uni.$TIM.TYPES.JOIN_OPTIONS_DISABLE_APPLY;
        needAgree.value = false;
    }else{

        if(needAgree.value){
            joinOption = uni.$TIM.TYPES.JOIN_OPTIONS_NEED_PERMISSION;
        }else{
            joinOption = uni.$TIM.TYPES.JOIN_OPTIONS_FREE_ACCESS;
        }

    }
    await updateGroupProfile({groupID:IM_STORE.groupProfile.groupID,joinOption})
}

const groupId = ref('')
const role = ref('')
const adminMembers = computed(()=>{
    const arr = JSON.parse(JSON.stringify(IM_STORE.groupMembers));
    return arr.filter(item=>item.role==='Admin');
});






const goAdd = () => {
    if(role.value!=='Owner'){
        uni.showToast({
            icon: "none",
            title: "您不是群主",
            duration: 1500,
        });
        return
    }
    uni.navigateTo({
        url:`/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupAddAdmin?groupId=${groupId.value }`,
    });
};
const goSub = () => {
    if(role.value!=='Owner'){
        uni.showToast({
            icon: "none",
            title: "您不是群主",
            duration: 1500,
        });
        return
    }
    uni.navigateTo({
        url:`/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupSubAdmin?groupId=${groupId.value }`,
    });
};


const groupProfile = ref({});
const joinOptionText = ref('')


const GetGroupProfile = async (groupId: string) => {


    if(!groupId){
        return;
    }

    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            GetGroupProfile(groupId);
        }, 200);
        return;
    }
    const res: any = await getGroupProfile(groupId);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "获取群信息失败",
            duration: 1500,
        });
        return;
    }

    groupProfile.value = data.group;
	
	isAllBanned.value = data.group.muteAllMembers
	
    const { joinOption } = data.group;
    if(joinOption === uni.$TIM.TYPES.JOIN_OPTIONS_NEED_PERMISSION){
        if(IM_STORE.groupDetail.payAmount){
            joinOptionText.value = '付费加入无需审核';
        }else{
            joinOptionText.value = '需管理员同意';
        }
    }
    if(joinOption===uni.$TIM.TYPES.JOIN_OPTIONS_DISABLE_APPLY){
        joinOptionText.value = '禁止所有人加入';
    }
    if(joinOption===uni.$TIM.TYPES.JOIN_OPTIONS_FREE_ACCESS){

        if(IM_STORE.groupDetail.payAmount){
            joinOptionText.value = '付费加入无需审核';
        }else{
            joinOptionText.value = '无需审核直接加入';
        }

    }

    role.value = data.group.selfInfo.role;
    // if(role.value==='Member'){
    //     goBack();
    // }

};
//全体禁言
const changeIsAllBanned = (bool: boolean) => {
	let parame = {
		groupID:groupId.value,
		muteAllMembers:bool
	}
    updateGroupProfile(parame).then((res:any) => {
		if(res.code == 0){
			let parm = {
				groupId:groupId.value,
				note:{
					type:'banned_all',
					value:bool
				}
			}
			sendBannedMessage(parm).then((res:any) => {
				console.log(res)
			})
		}
	});
};


onReady(() => {});


onLoad((option: any) => {
    if(option.groupID){
        role.value = option.role
        groupId.value = option.groupID;
    }
});

onShow(() => {
    GetGroupProfile(groupId.value)
});

onUnload(() => {
});

</script>

<style lang="scss" scoped>



.groupManage{

    .content{
        position:absolute;
        width:750rpx;
        left:0;
        right:0;
        padding-top:20rpx;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
    }

    .admins{

        padding:30rpx;
        gap:10rpx;
        .admin{
            width:120rpx;
            .img{
                width:120rpx;
                height:120rpx;
                border-radius: 50%;
                border:3px solid #fff;
                box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2)
            }
            .btn{
                width:120rpx;
                height:120rpx;
                border-radius: 50%;
                background:#f5f5f5;
                &:active{
                    opacity: .7;
                }
            }


            .text{
                width:100%;
                margin-top:15rpx;
                color:#999;
                font-size:20rpx;
                text-align: center;
            }
        }
    }
}
</style>
